<template>
<div class="common-diary">
  <ul id="demo" class="waterfall">
      <li class="box" v-for='(diary,index) in diary_list' :key="index">
          <router-link to=''>
            <div class="img-container">
                <img :src="diary.diary_before_pic" alt="">
                <span class="before-tag">术前</span>
            </div>
            <div class="img-container">
                <img :src="diary.diary_after_pic" alt="">
                <span class="after-tag">术后</span>
            </div>
                <p>
                    项目：<span class="orange-color">{{ diary.category_name }}</span>
                </p>
                <p>
                    医生：<span class="orange-color">{{ diary.doctor_name }}</span>
                </p>
                <div class="comment-like">
                    <i class="comment orange-color">{{ diary.comments_count }}</i>
                    <i class="like orange-color">{{ diary.thumb_up_count }}</i>
                </div>
          </router-link>
      </li>
      <!-- <li class="box" v-for='(diary,index) in diary_list' :key="index">
          <router-link to=''>
            <div class="img-container">
                <img src="../../../static/img/model.jpg" alt="">
                <span class="before-tag">术前</span>
            </div>
            <div class="img-container">
                <img src="../../../static/img/banner.png" alt="">
                <span class="after-tag">术后</span>
            </div>
                <p>
                    项目：<span class="orange-color">切开双眼皮</span>
                </p>
                <p>
                    医生：<span class="orange-color">肖刚</span>
                </p>
                <div class="comment-like">
                    <i class="comment orange-color">3213</i>
                    <i class="like orange-color">131234</i>
                </div>
          </router-link>
      </li> -->
     
  </ul>
</div>
</template>
<script>
    export default{
        props:{
            diary_list: {
                type:Array,
            },
            waterFall: {
                type: Function,
                default: ()=>{}
            }
        },
        data(){
            return {
                count: 5,
            }
        },
        mounted(){
            // this.getPosition();
            if(!this.waterFall) return;
            $("#demo").waterfall({
                itemClass: ".box",
                minColCount: 4,
                spacingHeight: 40,
                spacingWidth:40,
                resizeable: true,
                // itemAlign:'left',
                ajaxCallback: (success,end)=> {
                    console.log(232)
                    this.waterFall('12');
                    success();
                    end();
                }
            });
        },
        methods:{

            scroll(){ 
                //监听滚动事件，可以加载新数据的条件
                window.onscroll = ()=>{
                    var scrollTop = $(document).scrollTop();
                    var docH = $(document).height();
                    var offset_top = $('.waterfall .box').last().offset().top
                    var client_height = $(window).height();
                    console.log(client_height,scrollTop,offset_top);
                    if(client_height+scrollTop > offset_top){
                        if(true){
                            console.log('可以加载啦')
                        }
                    }
                }
            },
            getPosition(index){
                var col_count = 3;
                var width_space = 40;
                var left_arr = [];
                var top_arr = [0,0,0,0];
                var left = 0;
                var top_space = 40;
                // this.col_count = '';
                $('.box').each(function(i){
                    if(i<col_count){
                        $(this).css("left",left);
                        left_arr.push(left);
                        left += $(this).outerWidth()+width_space;
                        top_arr[i] = $(this).outerHeight()+top_space;
                    }else{
                        let current_col = i % col_count -1;
                        if(i % col_count === 0){
                            current_col = col_count - 1;
                        } 
                        $(this).css("top",top_arr[current_col]);
                        $(this).css("left",left_arr[current_col]);
                        let top = top_arr[current_col] +  $(this).outerHeight() + top_space;
                        top_arr[current_col]  = top;
                    }
                    var max_height = Math.max.apply(null, top_arr);
                    $('.waterfall').height(max_height);
                })
            }
        },
        beforeDestroy(){
            window.onscroll = null;
        }
    }
</script>
<style lang="less" scoped>
    .common-diary{
        overflow: hidden;
    }
    ul{
        position: relative;
        width: 1240px;
        // width: 100%;
        // overflow: hidden;
        li{
            position: absolute;
            // float: left;
            width: 270px;
            margin-right: 40px;
            margin-bottom: 50px;
            z-index: 2;
            box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
            &:hover{
                transform: scale(1.03);
                transition: all 0.5s;
            }
            .img-container{
                position: relative;
                max-height: 400px;
                font-size: 0;
            }
            p{
                padding: 0 10px;
                line-height: 26px;
            }
            .comment-like{
                padding: 0 10px;
                margin-top: 10px;
                .comment{
                    display: inline-block;
                    padding-left: 30px;
                    height: 30px;
                    line-height: 30px;
                    background: url(../../../static/img/icon_comment.png) no-repeat left center;
                    background-size: 22px;
                }
                .like{
                    float: right;
                    display: inline-block;
                    padding-left: 30px;
                    height: 30px;
                    line-height: 30px;
                    background: url(../../../static/img/icon_like.png) no-repeat left center;
                    background-size: 22px;                    
                }
            }
            .before-tag{
                color: white;
                position: absolute;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.3);
                line-height: 20px;
                padding: 0 5px;
            }
            .after-tag{
                color: white;
                position: absolute;
                left: 0;
                bottom: 0;
                background: rgba(42, 221, 197, 0.6);
                line-height: 20px;
                padding: 0 5px;
            }
        }
    }
</style>

